<template>
    <view class="comment-item flex-row gap-[20rpx]">
        <view class="left">
            <image :class="['first']" :src="item.userAvatar" mode="aspectFill"></image>
        </view>

        <view class="right flex-1 flex-column gap-[10rpx]">
            <view class="name">
                <fui-overflow-hidden
                    size="26"
                    fontWeight="700"
                    :text="item.userNickname"
                ></fui-overflow-hidden>
            </view>
            <view class="content">{{ item.content }}</view>
            <view class="time flex-between">
                <text>{{ item.createTime }}</text>
                <view class="flex-row-center gap-[10rpx]">
                    <image
                        :src="$getImg('/img/icon/home/pinlun.png')"
                        mode="aspectFill"
                        @click.stop="inpFocus(item)"
                    />
                    <image
                        :src="
                            item.likeFlag
                                ? $getImg('/img/icon/home/dianzan1.png')
                                : $getImg('/img/icon/home/dianzan.png')
                        "
                        mode="aspectFill"
                        @click.stop="likeFn(item)"
                    />{{ item.likeCount }}
                </view>
            </view>
            <template v-if="item.reply">
                <view
                    class="comment-item-1 flex-row gap-[20rpx]"
                    v-for="(s, i) in item.reply"
                    :key="i"
                >
                    <view class="left">
                        <image :class="['second']" :src="s.userAvatar" mode="aspectFill"></image>
                    </view>

                    <view class="right flex-1 flex-column gap-[10rpx]">
                        <view class="name flex-row-center gap-[10rpx]">
                            <view class="w-50">
                                <fui-overflow-hidden
                                    size="26"
                                    fontWeight="700"
                                    :text="s.userNickname"
                                    :row="1"
                                ></fui-overflow-hidden>
                            </view>
                            <text style="font-size: 10px">▶</text>
                            <view class="w-50">
                                <fui-overflow-hidden
                                    size="26"
                                    fontWeight="700"
                                    :text="s.toUserNickname"
                                    :row="1"
                                ></fui-overflow-hidden>
                            </view>
                        </view>
                        <view class="content">{{ s.content }}</view>
                        <view class="time flex-between">
                            <text>{{ s.createTime }}</text>
                            <view class="flex-row-center gap-[10rpx]">
                                <image
                                    :src="$getImg('/img/icon/home/pinlun.png')"
                                    mode="aspectFill"
                                    @click.stop="inpFocus(s)"
                                />
                                <image
                                    :src="
                                        s.likeFlag
                                            ? $getImg('/img/icon/home/dianzan1.png')
                                            : $getImg('/img/icon/home/dianzan.png')
                                    "
                                    @click.stop="likeFn(s)"
                                    mode="aspectFill"
                                />{{ s.likeCount }}
                            </view>
                        </view>
                        <template v-if="item.reply"> </template>
                    </view>
                </view>
            </template>
            <view class="flex-row put-box gap-[20rpx]" v-if="Number(item.childCommentCount) > 0">
                <view
                    class="more flex-row-center"
                    @click="unfoldFn(item)"
                    v-if="
                        (Number(item.childCommentCount) > 0 &&
                            item.reply.length < item.chirdTotal) ||
                        (Number(item.childCommentCount) > 0 && item.reply.length === 0)
                    "
                    >展开更多 <fui-icon name="arrowdown" :size="20"></fui-icon
                ></view>
                <view
                    class="flex-row-center put-away"
                    v-if="item.reply.length > 0"
                    @click="putAwayFn(item)"
                >
                    收起 <fui-icon name="arrowdown" :size="20"></fui-icon
                ></view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" name="commentItem" setup>
import { getPostCommentListAPI } from '@/api/posts'
import GridItem from '@/components/TUICallKit/src/Components/components/base/Grid/GridItem/GridItem.vue'
import { size } from 'lodash-es'
import { userActionAPI } from '@/api/common'
const putAwayFn = (item: any) => {
    item.reply = []
}

// 13.点赞帖子 14.点赞产品评论

// 评论点赞

const actionZanList = [
    //  14.点赞产品评论 15.点赞店铺评论 16.点赞视频评论 17.点赞帖子评论
    '',
    14,
    16,
    17
]

const likeFn = async (row: any) => {
    const res = await userActionAPI({
        type: 1,
        bindId: row.id,
        action: actionZanList[props.type as any]
    })
    if (res.code === 0) {
        row.likeFlag = !row.likeFlag
        row.likeCount = row.likeFlag ? row.likeCount + 1 : row.likeCount - 1
    }
}

const props = defineProps({
    level: {
        type: String,
        default: 'first'
    },
    type: {
        type: String,
        default: '3'
    },
    item: {
        type: Object,
        default: () => ({})
    },
    postId: {
        type: String,
        default: ''
    }
})

interface IComment {
    bindId: string
    commentId: string
    reply: any[]
    id: string
    chirdTotal: number
}

// 展开更多
const unfoldFn = (row: IComment) => {
    console.log('展开更多', row)

    if (!row.reply) {
        row.reply = []
    }

    if (row.reply.length !== 0 && row.reply.length === row.chirdTotal) {
        return
    }
    let page = 1
    if (row.reply.length < row.chirdTotal) {
        page = (row.reply ? row.reply.length : 0 / 10) + 1
    }

    // 1. 请求评论列表
    getPostCommentListAPI({
        type: props.type, // 1: 产品 2: 视频 3: 帖子
        bindId: row.bindId,
        pid: row.id,
        page,
        size: 10,
        isSecondLevel: 1 // 是否二级评论  1是 0 否
    }).then((res) => {
        if (res.code === 0) {
            if (page === 1) {
                row.reply = res.data.records
            } else {
                row.reply = row.reply.push(...res.data.records)
            }

            row.chirdTotal = res.data.total
        }

        console.log('子评论id', row.reply)
    })
}

// 聚焦
const inpFocus = (row: any) => {
    const obj = {
        ...row,
        postId: props.postId
    }
    uni.$emit('inpFocus', obj)
}
</script>

<style lang="scss" scoped>
.put-box {
    font-size: 10px;
    color: #666666;
    .more {
        background-color: #f5f5f5;
        padding: 5rpx 10rpx;
        border-radius: 999rpx;
    }
}

.comment-item,
.comment-item-1 {
    padding: 20rpx 0;
    image {
        width: 40rpx;
    }
    .left {
        .fist {
            width: 80rpx;
            height: 80rpx;
        }
        .second {
            width: 60rpx;
            height: 60rpx;
        }
        image {
            border-radius: 999rpx;
            width: 80rpx;
            height: 80rpx;
        }
    }

    .right {
        .name {
            font-size: 13px;
            font-weight: 700;
            width: 50%;
        }
        .content {
            font-size: 14px;
        }
        .time {
            width: 100%;
            color: #999999;
            font-size: 10px;
            image {
                width: 30rpx;
                height: 30rpx;
            }
        }
    }
}

.w-50 {
    width: 50%;
}
</style>
